/**
* Created By wifi_uncle on 2020/2/17
*/
<template>
  <div class="col-sm-12 area-location"  id="location">
    <!--搜索框  start-->
    <div class="col-sm-12" v-show="isSearch">
      <div class="mint-searchbar" style="padding: 0 10px;">
        <div class="mint-searchbar-inner">
          <i class="mintui mintui-search"></i>
          <input type="search" v-model="keywords" placeholder="请输入楼盘名称" class="mint-searchbar-core" style="margin-left: 8px;">
          <i id="closeIcon" class="mintui mintui-field-error" style="color: #8f8e94;display: none;" @click="search()"></i>
        </div>
        <a @click="search" class="mint-searchbar-cancel" style="color: #fe5419;font-weight: bold;font-size: 14px;">搜索</a>
        <a @click="cancelSearch" class="mint-searchbar-cancel" style="color: #fe5419;font-weight: bold;font-size: 14px;">取消</a>
      </div>
    </div>
    <!--搜索框  end-->
    <!-- 区域定位 -->
    <div v-show="!isSearch">
      <div class="col-sm-8 bor-r" >
        <div @click="chooseRegion">
          <i class="position-icon fa fa-map-marker" aria-hidden="true"></i>
          <a v-if="region">
            <span >{{ region | regionFilter}}</span>
          </a>
        </div>
      </div>
      <div class="col-sm-3 bor-r text-center">
        <button class="location-btn" @click="">筛选</button>
      </div>
      <div class="col-sm-1 text-center">
        <button class="location-btn" @click="showSearch">
          <i class="fa fa-search" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <!-- 区域定位 end-->
  </div>
</template>

<script>
  import {Service} from '../../../../js/base'
  export default {
    name: "PremiseSearch",
    data() {
      return {
        isSearch: false,
        keywords: '',
      }
    },
    mounted() {
      this.init()
    },
    props: {
      region: {
        type: Object,
        default: () => {
          return {
            province: { name: '' },
            city: { name: '' },
            area: { name: '' },
          }
        }
      }
    },
    filters: {
      regionFilter(val) {
        let showStr = ''
        let defaultMsg ='请选择地区'
        if(!val) {
          return defaultMsg
        }
        const { province, city, area} = val
        showStr = province && province.id ? province.name : ''
        showStr += city && city.id ? '-' + city.name : ''
        showStr += area && area.id ? '-' + area.name : ''
        return  showStr ? showStr : defaultMsg
      }
    },

    methods: {
      init () {
      },
      chooseRegion() {
        this.$emit('choose-region')
      },
      searchList: function(flag) {
      },
      showSearch(){
        document.body.scrollTop = 0
        document.documentElement.scrollTop = 0
        this.isSearch = !this.isSearch
      },
      search(){
        this.$emit('search', this.keywords)
      },
      cancelSearch(){
        this.$emit('search', '')
        this.isSearch = false
      },

    }
  }
</script>

<style lang="less" scoped>

</style>
